<template>
  <div class="flow-setting">
    <p class="title"><SvgIcon name="setting" :size="14"/>系统操作</p>
    <el-tabs class="tabs no-bottom-margin" stretch v-model="tabsActive">
      <el-tab-pane name="0">
        <template #label>
          <el-tooltip slot="label" effect="dark" content="配置" placement="top">
            <div><SvgIcon name="setting" /></div>
          </el-tooltip>
        </template>
        <div class="panel-margin-top">
          <el-form label-width="100px" label-position="left" size="small">
            <el-form-item label="网格">
              <el-switch v-model="state.flowDesign.setting.grid.open" @change="options"/>
            </el-form-item>
            <el-form-item label="网格类型">
              <el-radio-group v-model="state.flowDesign.setting.grid.type" @change="options">
                <el-radio label="mesh">线</el-radio>
                <el-radio label="dot">点</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="网格大小">
              <el-input-number v-model="state.flowDesign.setting.grid.size" :min="1" :max="20" @change="options" />
            </el-form-item>
            <el-form-item label="背景颜色">
              <el-color-picker v-model="state.flowDesign.setting.backgroundColor" @change="options"/>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import {inject, onMounted, ref} from "vue";
import {ModelerContext} from "../../useapi";
import SvgIcon from '../../../component/svgIcon/index.vue';

const state: any = inject<any>('state')
const modeler: ModelerContext = inject<any>('modeler_context')
const {refreshGraph} = modeler

const tabsActive = ref("0")

//网格开关，刷新画布
const options = () => {
  if (state.flowDesign.setting.grid.open){
    modeler.lf!.options!.grid = {
      visible: true,
      type: state.flowDesign.setting.grid.type,
      size: state.flowDesign.setting.grid.size,
      config: {
        color: '#eeeeee',
        thickness: 2,
      }
    }
  }else {
    modeler.lf!.options!.grid = false
  }
  //判断背景
  let background:any = {}
  if (state.flowDesign.setting?.backgroundColor){
    background.backgroundColor = state.flowDesign.setting?.backgroundColor
  }
  if (Object.keys(background).length === 0) {
    background = false
  }

  modeler.lf!.options!.background = background
  //刷新画布
  refreshGraph()
}

onMounted(() => {
  console.log(modeler)
})

</script>

<style scoped lang="scss">
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
</style>